<template>
  <el-header class="header-bar">
    <div class="header-left">
      <span class="system-title">
        <el-icon style="vertical-align: middle;"><HomeFilled /></el-icon>
        选课管理系统
      </span>
    </div>
    <div class="header-right">
      <el-divider direction="vertical"></el-divider>
      <el-tag size="small" style="background:#fff;color:#409EFF;border:none;">25-春季学期</el-tag>
      <el-divider direction="vertical"></el-divider>
      <el-dropdown>
        <span class="username">
          <el-icon><User /></el-icon>
          {{ username }}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="navigateToPersonal">
              个人管理
            </el-dropdown-item>
            <el-dropdown-item @click="logout">
              退出登录
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </el-header>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { HomeFilled, User } from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue'

const router = useRouter()
const username = ref('')

onMounted(() => {
  username.value = localStorage.getItem('username') || '未登录'
})

const logout = () => {
  localStorage.removeItem('username')
  router.push('/login')
}

const navigateToPersonal = () => {
  const userRole = localStorage.getItem('userRole'); // 获取用户角色
  if (userRole) {
    router.push(`/${userRole}/profile`); // 根据角色跳转到对应的个人页面
  } else {
    console.error('User role not found in local storage');
  }
};

</script>

<style scoped>
.header-bar {
  width: 100%;
  height: 56px;
  background: #42a5f5;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  box-sizing: border-box;
}
.header-left .system-title {
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 2px;
  display: flex;
  align-items: center;
}
.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.username {
  color: white;
  font-weight: 500;
  margin-left: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}
</style>
